<!DOCTYPE html>
<html lang="en">
<!--author:zk-->
<head>
    <meta charset="UTF-8">
    <title>添加管理员权限</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots."/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        .contain {
            width: 500px;
            height: 50px;
            margin: 100px auto;
        }

        .parent {
            width: 100%;
            height: 42px;
            top: 4px;
            position: relative;
        }

        .parent > input:first-of-type {
            /*输入框高度设置为40px, border占据2px，总高度为42px*/
            width: 380px;
            height: 43px;
            border: 1px solid #ccc;
            font-size: 16px;
            outline: none;
        }

        .parent > input:first-of-type:focus {
            border: 1px solid #317ef3;
            padding-left: 10px;
        }
        .admin{
            cursor: pointer;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 5px;
            padding-bottom: 5px;
            color: #fff;
            background-color: #5bc0de;
            border: 0;
            border-radius: 10px;
        }
        .parent > input:last-of-type {
            /*button按钮border并不占据外围大小，设置高度42px*/
            width: 100px;
            height: 44px;
            position: absolute;
            background: #317ef3;
            border: 1px solid #317ef3;
            color: #fff;
            font-size: 16px;
            outline: none;
            cursor: pointer;
        }

        .dropbtn {
            background-color: transparent;
            color: white;
            padding-left: 35px;
            padding-right: 35px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .dropdown {
            position: relative;
            display: inline-block;
            text-align: center;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            width: 100%;;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown:hover .dropbtn {
            background-color: transparent;
        }

        /*导航栏样式*/
        .navbar {
            background-color: #222;
        }
        #daohang {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: transparent;
        }
        li {
            height: 40px;
            padding-left: 0;
            padding-right: 20px;
            font-size: 15px;
            float: left;
        }
        li a {
            padding: 10px;
            display: block;
            color: white;
            text-align: center;
            /*padding: 14px 16px;*/
            text-decoration: none;
        }
        /*!*鼠标移动到选项上修改背景颜色 *!*/
        li a:hover {
            background-color: #111;
        }
        .active {
            background-color: black;
        }

        button{
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 5px;
            padding-bottom: 5px;
            color: #fff;
            background-color: #5bc0de;
            border: 0;
            border-radius: 10px;
        }
        button:hover{
            background-color: #97d3e7;
        }

        .even
        {
            background-color: white;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
    <a class="navbar-brand font-weight-bold" href="manager.html">我的OJ平台</a>
    <div class="collapse navbar-collapse" id="topMenu">
        <ul class="navbar-nav ml-auto" >
            <div style="margin:5px" id="javaoj">
                <a style="color: white" href="login.html" onclick="logout()"> 退出登录</a>
                <div class="dropdown">
                    <button class="dropbtn">设置</button>
                    <div class="dropdown-content">
                        <a href="updateInfo.html">修改个人信息</a>
                        <a href="updatePassword.html">修改密码</a>
                    </div>
                </div>
            </div>
        </ul>
    </div>
</nav>
    <section class="my-5 pt-5">
        <div class="container">
            <!-- Tables  -->
            <div class="row mb-5" id="tables">
            <div class="col-sm-12" style="background-color: white">
                <div class="mt-3 mb-5">
                    <h3 style="align: center">添加管理员权限</h3>
                    <table class="table table-striped" id="shareContent" style="background-color: #f5f5f5">

                    </table>
                </div>
            </div>
            </div>
        </div>
    </section>
<!--    <table border="1" cellspacing="0" id="shareContent" align="center">-->

<!--    </table>-->
    <script type="text/javascript">
        var userId=localStorage.getItem("userId");
        getUser();
        let nowPage=1;
        let totalPage;
        //一上来跑的数据
        $(document).ready(function(){
            $.ajax({
                url:"http://192.168.47.129:8010/user/queryRank?page=1",
                //data是返回值 所有数据
                success:function (object) {
                    console.log(object);
                    let shareHtml="<tr><th>学号</th><th>用户名</th><th>性别</th><th>完成题目数</th><th>管理员权限</th></tr>";
                    let array=object.data.content;
                    console.log(shareHtml);
                    for(let i=0;i<array.length;i++){
                        shareHtml+='<tr>' +
                            '<td>'+array[i].id+'</td>\n' +
                            '<td>'+array[i].username+'</td>\n' +
                            '<td>'+checkGender(array[i].gender)+'</td>\n' +
                            '<td>'+array[i].acCount+'</td>\n' +
                            '<td><button class="admin" onclick="addPower('+array[i].id+')" >添加权限</button></td>' +
                            '</tr>';
                    }
                    totalPage=object.data.totalPages;
                    shareHtml+="<tr>" +
                        "<td colspan='5' style='text-align: center'><button style='margin-left: 20px' class='page_btn' href='#' onclick='firstPage()'>首页</button>" +
                        "<button style='margin-left: 20px' class='page_btn' href='#' onclick='previousPage()'>上一页</button>" +
                        "<button style='margin-left: 20px' class=page_btn style='width: 150px'>"+"第 "+nowPage+" / "+totalPage+" 页"+"</button>" +
                        "<button style='margin-left: 20px' class='page_btn'  href='#' onclick='nextPage()'>下一页</button>" +
                        "<button style='margin-left: 20px' class='page_btn'  href='#' onclick='lastPage()'>末页</button</td>" +
                        "</tr>"
                    //shareContent为留出来填充内容的div的id名
                    $("#shareContent").html(shareHtml);
                    //表格单双行变色
                    $().ready(function(){
                        $('tr:even').addClass('even');
                    });
                }
            })
        })
        //添加权限的方法
        function addPower(xuehao) {
            $.ajax({
                url:"http://192.168.47.129:8010/admin/grantPermission/"+xuehao+"/admin",
                type:"post",
                //data是返回值 所有数据
                success:function (object) {
                    console.log("添加权限")
                    let msg=object.msg;
                    if(msg==="用户权限添加成功"){
                        alert("管理员权限添加成功！");
                        let shareHtml="";
                        let array=object.data.content;
                        for(let i=0;i<array.length;i++){
                            shareHtml+='<tr>\n' +
                                '<td>'+array[i].id+'</td>\n' +
                                '<td>'+array[i].username+'</td>\n' +
                                '<td>'+checkGender(array[i].gender)+'</td>\n' +
                                '<td>'+array[i].acCount+'</td>\n' +
                                '<td><button class="admin" onclick="addPower()" >添加权限</button></td>\n' +
                                '</tr>';
                        }
                        shareHtml+="<tr>" +
                            "<td colspan='5' style='text-align: center'><button style='margin-left: 20px' class='page_btn' href='#' onclick='firstPage()'>首页</button>" +
                            "<button style='margin-left: 20px' class='page_btn' href='#' onclick='previousPage()'>上一页</button>" +
                            "<button style='margin-left: 20px' class=page_btn style='width: 150px'>"+"第 "+nowPage+" / "+totalPage+" 页"+"</button>" +
                            "<button style='margin-left: 20px' class='page_btn'  href='#' onclick='nextPage()'>下一页</button>" +
                            "<button style='margin-left: 20px' class='page_btn'  href='#' onclick='lastPage()'>末页</button</td>" +
                            "</tr>"
                        //shareContent为留出来填充内容的div的id名
                        $("#shareContent").html(shareHtml);
                        //表格单双行变色
                        $().ready(function(){
                            $('tr:even').addClass('even');
                        });
                    }else if(msg==="已经是管理员了!"){
                        alert("该用户已经是管理员了！");
                    }else if(msg==="用户不存在"){
                        alert("用户不存在！");
                    }
                }
            })
        }
        //跳转到第一页的方法
        function firstPage(){
            nowPage=1;
            $.ajax({
                url:"http://192.168.47.129:8010/user/queryRank?page="+nowPage,
                //data是返回值 所有数据
                success:function (object) {
                    console.log(object);
                    let shareHtml="<tr><th>学号</th><th>用户名</th><th>性别</th><th>完成题目数</th><th>管理员权限</th></tr>";
                    let array=object.data.content;
                    console.log(shareHtml);
                    for(let i=0;i<array.length;i++){
                        shareHtml+='<tr>' +
                            '<td>'+array[i].id+'</td>\n' +
                            '<td>'+array[i].username+'</td>\n' +
                            '<td>'+checkGender(array[i].gender)+'</td>\n' +
                            '<td>'+array[i].acCount+'</td>\n' +
                            '<td><button class="admin" onclick="addPower('+array[i].id+')" >添加权限</button></td>' +
                            '</tr>';
                    }
                    totalPage=object.data.totalPages;
                    shareHtml+="<tr>" +
                        "<td colspan='5' style='text-align: center'><button style='margin-left: 20px' class='page_btn' href='#' onclick='firstPage()'>首页</button>" +
                        "<button style='margin-left: 20px' class='page_btn' href='#' onclick='previousPage()'>上一页</button>" +
                        "<button style='margin-left: 20px' class=page_btn style='width: 150px'>"+"第 "+nowPage+" / "+totalPage+" 页"+"</button>" +
                        "<button style='margin-left: 20px' class='page_btn'  href='#' onclick='nextPage()'>下一页</button>" +
                        "<button style='margin-left: 20px' class='page_btn'  href='#' onclick='lastPage()'>末页</button</td>" +
                        "</tr>"
                    //shareContent为留出来填充内容的div的id名
                    $("#shareContent").html(shareHtml);
                    //表格单双行变色
                    $().ready(function(){
                        $('tr:even').addClass('even');
                    });
                }
            })
        }
        //跳转到上一页的方法
        function previousPage() {
            nowPage=nowPage-1;
            if(nowPage===0){
                nowPage=1;
                alert("这已经是第一页了");
            }else{
                $.ajax({
                    url:"http://192.168.47.129:8010/user/queryRank?page="+nowPage,
                    //data是返回值 所有数据
                    success:function (object) {
                        console.log(object);
                        let shareHtml="<tr><th>学号</th><th>用户名</th><th>性别</th><th>完成题目数</th><th>管理员权限</th></tr>";
                        let array=object.data.content;
                        console.log(shareHtml);
                        for(let i=0;i<array.length;i++){
                            shareHtml+='<tr>' +
                                '<td>'+array[i].id+'</td>\n' +
                                '<td>'+array[i].username+'</td>\n' +
                                '<td>'+checkGender(array[i].gender)+'</td>\n' +
                                '<td>'+array[i].acCount+'</td>\n' +
                                '<td><button class="admin" onclick="addPower('+array[i].id+')" >添加权限</button></td>' +
                                '</tr>';
                        }
                        totalPage=object.data.totalPages;
                        shareHtml+="<tr>" +
                            "<td colspan='5' style='text-align: center'><button style='margin-left: 20px' class='page_btn' href='#' onclick='firstPage()'>首页</button>" +
                            "<button style='margin-left: 20px' class='page_btn' href='#' onclick='previousPage()'>上一页</button>" +
                            "<button style='margin-left: 20px' class=page_btn style='width: 150px'>"+"第 "+nowPage+" / "+totalPage+" 页"+"</button>" +
                            "<button style='margin-left: 20px' class='page_btn'  href='#' onclick='nextPage()'>下一页</button>" +
                            "<button style='margin-left: 20px' class='page_btn'  href='#' onclick='lastPage()'>末页</button</td>" +
                            "</tr>"
                        //shareContent为留出来填充内容的div的id名
                        $("#shareContent").html(shareHtml);
                        //表格单双行变色
                        $().ready(function(){
                            $('tr:even').addClass('even');
                        });
                    }
                })
            }
        }
        //跳转到下一页的方法
        function nextPage() {
            nowPage=nowPage+1;
            if(nowPage===totalPage+1){
                nowPage=totalPage;
                alert("这已经是最后一页了");
            }else{
                $.ajax({
                    url:"http://192.168.47.129:8010/user/queryRank?page="+nowPage,
                    //data是返回值 所有数据
                    success:function (object) {
                        console.log(object);
                        let shareHtml="<tr><th>学号</th><th>用户名</th><th>性别</th><th>完成题目数</th><th>管理员权限</th></tr>";
                        let array=object.data.content;
                        console.log(shareHtml);
                        for(let i=0;i<array.length;i++){
                            shareHtml+='<tr>' +
                                '<td>'+array[i].id+'</td>\n' +
                                '<td>'+array[i].username+'</td>\n' +
                                '<td>'+checkGender(array[i].gender)+'</td>\n' +
                                '<td>'+array[i].acCount+'</td>\n' +
                                '<td><button class="admin" onclick="addPower('+array[i].id+')" >添加权限</button></td>' +
                                '</tr>';
                        }
                        totalPage=object.data.totalPages;
                        shareHtml+="<tr>" +
                            "<td colspan='5' style='text-align: center'><button style='margin-left: 20px' class='page_btn' href='#' onclick='firstPage()'>首页</button>" +
                            "<button style='margin-left: 20px' class='page_btn' href='#' onclick='previousPage()'>上一页</button>" +
                            "<button style='margin-left: 20px' class=page_btn style='width: 150px'>"+"第 "+nowPage+" / "+totalPage+" 页"+"</button>" +
                            "<button style='margin-left: 20px' class='page_btn'  href='#' onclick='nextPage()'>下一页</button>" +
                            "<button style='margin-left: 20px' class='page_btn'  href='#' onclick='lastPage()'>末页</button</td>" +
                            "</tr>"
                        //shareContent为留出来填充内容的div的id名
                        $("#shareContent").html(shareHtml);
                        //表格单双行变色
                        $().ready(function(){
                            $('tr:even').addClass('even');
                        });
                    }
                })
            }
        }
        //跳转到末页的方法
        function lastPage() {
            nowPage=totalPage;
            $.ajax({
                url:"http://192.168.47.129:8010/user/queryRank?page="+nowPage,
                //data是返回值 所有数据
                success:function (object) {
                    console.log(object);
                    let shareHtml="<tr><th>学号</th><th>用户名</th><th>性别</th><th>完成题目数</th><th>管理员权限</th></tr>";
                    let array=object.data.content;
                    console.log(shareHtml);
                    for(let i=0;i<array.length;i++){
                        shareHtml+='<tr>' +
                            '<td>'+array[i].id+'</td>\n' +
                            '<td>'+array[i].username+'</td>\n' +
                            '<td>'+checkGender(array[i].gender)+'</td>\n' +
                            '<td>'+array[i].acCount+'</td>\n' +
                            '<td><button class="admin" onclick="addPower('+array[i].id+')" >添加权限</button></td>' +
                            '</tr>';
                    }
                    totalPage=object.data.totalPages;
                    shareHtml+="<tr>" +
                        "<td colspan='5' style='text-align: center'><button style='margin-left: 20px' class='page_btn' href='#' onclick='firstPage()'>首页</button>" +
                        "<button style='margin-left: 20px' class='page_btn' href='#' onclick='previousPage()'>上一页</button>" +
                        "<button style='margin-left: 20px' class=page_btn style='width: 150px'>"+"第 "+nowPage+" / "+totalPage+" 页"+"</button>" +
                        "<button style='margin-left: 20px' class='page_btn'  href='#' onclick='nextPage()'>下一页</button>" +
                        "<button style='margin-left: 20px' class='page_btn'  href='#' onclick='lastPage()'>末页</button</td>" +
                        "</tr>"
                    //shareContent为留出来填充内容的div的id名
                    $("#shareContent").html(shareHtml);
                    //表格单双行变色
                    $().ready(function(){
                        $('tr:even').addClass('even');
                    });
                }
            })
        }
        //获取用户登录信息，获取失败则返回登录页面
        function getUser(){
            if (userId==null){
                location.assign("login.html");
            }
        }
        function logout(){
            localStorage.clear();
        }

        function checkGender(gender){
            if(gender=="M"){
                return "男";
            }else{
                return "女"
            }
        }
    </script>
</body>
</html>